<template>
  <el-dialog :visible="isShowAdd" :title="cateId===-1?'新增分类':'编辑分类'" @close="btnCancel">
    <el-form ref="ruleForm" label-position="top" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="ruleForm.desc" type="textarea" :rows="5" resize="none" />
      </el-form-item>
    </el-form>
    <el-form label-position="left">
      <el-form-item label="封面">
        <ImageUpload ref="cover" />
      </el-form-item>
    </el-form>
    <el-row />
    <el-row type="flex" justify="center">
      <el-button type="primary" size="mini" @click="addCategory('ruleForm')">确定</el-button>
      <el-button size="mini" @click="btnCancel('ruleForm')">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { addCategory, editCate, getCategorySeclect } from '@/api/category'
export default {
  props: {
    isShowAdd: {
      type: Boolean,
      require: true
    }
  },
  data() {
    return {
      imageUrl: '',
      cateId: -1,
      ruleForm: {
        title: '',
        desc: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    async cateId() {
      if (this.cateId !== -1) {
        const res = await getCategorySeclect(this.cateId)
        this.ruleForm = res.data
        this.$nextTick(() => {
          this.$refs.cover.fileList = [{ url: res.data.image }]
        })
        console.log(55, res)
        console.log(60, this.$refs.cover.fileList)
      }
    }
  },
  methods: {
    // 弹窗图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    async addCategory() {
      // 表单验证
      await this.$refs.ruleForm.validate()
      // 新增分类
      if (this.cateId === -1) {
        console.log(12324546)
        const res = await addCategory({
          ...this.ruleForm,
          image: this.$refs.cover.fileList[0] ? this.$refs.cover.fileList[0].url : 'https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto'
        })
        setTimeout(() => {
          if (!(this.$refs.cover.fileList[0] && this.$refs.cover.fileList[0].url)) {
            this.$message.warning('未上传图片,已为您添加默认图片.')
          }
        }, 100)
        console.log(res, 69)
      } else {
        await editCate(this.ruleForm)
      }
      this.$message.success(this.cateId === -1 ? '新增分类成功!' : '编辑分类成功!')
      console.log(100, this.$refs.cover.fileList[0])

      this.btnCancel()
      // console.log(92, res)
    },
    async btnCancel() {
      this.cateId = -1
      this.ruleForm = {
        title: '',
        desc: ''
      }
      setTimeout(() => {
        this.$refs.cover.fileList = []
      }, 2000)
      this.$emit('closeAdd')
    }
  }
}
</script>

<style>

</style>
